<template>
	<div id="app">
		<div>
			<h2>vue中使用 iconfont 阿里巴巴在线生成的字体图标 -- font class</h2>
			<h3>-- 用 color 指定颜色</h3>
			<i class="iconfont icon-iconfont5" style="color:blue"></i>
			<i class="iconfont icon-iconfontxingxing"></i>
			<i class="iconfont icon-iconfontmingpian"></i>
			<i class="iconfont icon-iconfontriyongbaihuo"></i>
			<i class="iconfont icon-iconfontshipin"></i>
			<i class="iconfont icon-iconfontwujingongju"></i>
			<i class="iconfont icon-iconfontyundonghuwai"></i>
			<i class="iconfont icon-iconfontgongyichongwu"></i>
			<i class="iconfont icon-iconfontyundonghuwai"></i>
			<i class="iconfont icon-iconfontphone"></i>
			<i class="iconfont icon-iconfont-shanzi"></i>
		</div>
		<hr>
		<div>
			<h2>vue中使用 iconfont 阿里巴巴在线生成的字体图标 -- symbol</h2>
			<h3>-- 用 fill 指定颜色</h3>
			<svg class="icon" aria-hidden="true" style="fill: green">
				<use xlink:href="#icon-iconfont5"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontxingxing"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontmingpian"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontriyongbaihuo"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontshipin"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontwujingongju"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontgongyichongwu"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontyundonghuwai"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfontphone"></use>
			</svg>
			<!-- 扇子图形本身不能变色 -->
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-iconfont-shanzi"></use>
			</svg>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		components: {},
		mounted() {
			require("./assets/js/iconfont");
		}
	}
</script>

<style>
	@import "./assets/css/iconfont.css";

	i {
		margin: 5px;
		font-size: 50px;
		color: red;
	}

	.icon {
		width: 4em;
		height: 4em;
		margin: 5px;
		vertical-align: -0.15em;
		fill: red;
		overflow: hidden;
	}
</style>
